<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Map Example</title>
    <style>
        #the-img {
            position: relative;
            width: 500px;
            height: 375px;
            border: thin solid #000;
            background: url("tea-shipment.jpg") no-repeat;
        }

        #the-img ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #the-img a {
            position: absolute;
            text-indent: -1000em;
        }

        #the-img a:hover {
            border: 4px solid #000;
        }

        #ss a {
            top: 8px;
            left: 15px;
            width: 80px;
            height: 225px;
        }

        #gn a {
            top: 226px;
            left: 5px;
            width: 60px;
            height: 110px;
        }

        #ib a {
            top: 225px;
            left: 85px;
            width: 70px;
            height: 110px;
        }

        #i-tea1 a {
            top: 100px;
            left: 320px;
            width: 178px;
            height: 125px;
        }

        #i-tea2 a {
            top: 225px;
            left: 375px;
            width: 123px;
            height: 115px;
        }
    </style>
</head>
<body>
    <div id="the-img">
        <ul>
            <li id="ss"><a href="[some url]" title="">Sugarshots</a></li>
            <li id="gn"><a href="[some url]" title="Golden Mendle">Golden Mendle</a></li>
            <li id="ib"><a href="[some url]" title="Irish Breakfast">Irish Breakfast</a></li>
            <li id="i-tea1"><a href="[some url]" title="IngenuiTEA">IngenuiTEA</a></li>
            <li id="i-tea2"><a href="[some url]" title="IngenuiTEA">IngenuiTEA</a></li>
        </ul>
    </div>
</body>
</html>
